<template>
    <footer class="footer">
      <span class="todo-count">剩余<strong>{{this.arr.length}}</strong></span>
      <ul class="filters" @click="fn">
        <li>
          <a :class="{selected:isSel === 'all'}" href="javascript:;"  @click="isSel = 'all'">全部</a>
        </li>
        <li>
          <a :class="{selected:isSel === 'no'}" href="javascript:;" @click="isSel = 'no'">未完成</a>
        </li>
        <li>
          <a :class="{selected:isSel === 'yes'}" href="javascript:;" @click="isSel = 'yes'">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="btn">清除已完成</button>
    </footer>
  </template>
  
  <script>
  export default {
    props:{
        arr:Array,
        type:String,
    },
    data(){
        return {
            isSel:'all'  //默认显示全部  no 显示未完成  yes  显示已完成
        }
    },
    methods:{
        fn(){
            this.$emit('setFn',this.isSel)
        },
        btn(){
           this.$emit('clear')
        }
    }

  }
  </script>